<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <style>
        * {
            font-size: 12px;
        }

        .layui-icon {
            margin-top: 5px;
        }

        .layui-input-block .layui-icon {
            margin-top: 0px;
        }

        .layui-table-view {
            border: none;
            margin: 0;
        }

        .layui-table-tool {
            background-color: transparent;
        }

        .layui-panel {
            border-radius: 5px;
        }

        .fade-in-left {
            animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
        }

        @keyframes fade-in-left {
            0% {
                transform: translateX(-50px);
                opacity: 0;
            }
            100% {
                transform: translateX(0);
                opacity: 1;
            }
        }

        .fName {
            color: #2f2f2f;
        }

        .fName:hover {
            text-decoration: underline;
            color: #636363;
            font-weight: bold;
        }

        .layui-table-body {
            overflow: visible;
        }

        .box {
            display: grid;
            place-items: center;
            text-align: center;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            z-index: 100000;
        }

        .box > i {
            font-size: 60px;
        }
    </style>
</head>
<div id="feastInfo" class="layui-row" style="display: none">
    <div class="layui-col-md12" style="padding: 0px 5px">
        <div class="layui-form-item fade-in-left" id="attendInfo_top" style="display: none;margin-top: 15px;margin-bottom: 0px">
            <div style="margin-left: 10px" class="layui-form-mid">宴会名</div>
            <div class="layui-input-inline">
                <input type="text" disabled id="feastTitle" required readonly lay-verify="required" autocomplete="off" class="layui-input">
            </div>

            <div class="layui-form-mid">合计礼金</div>

            <div class="layui-input-inline">
                <input type="text" disabled id="sumGift" required readonly lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>

        <table lay-filter="attendTab" class="layui-table fade-in-left" id="attendInfoTab"></table>
    </div>
</div>
<body class="fade-in-left">
<div class="box">
    <i><img  src="../static/logo/loading.svg" alt=""></i>
</div>

<div class="layui-row main" style="display: none;padding: 8px">
    <div class="layui-col-md12">
        <div class="layui-panel">
            <table id="giftData" lay-filter="test"></table>
        </div>
    </div>
</div>

<script src="../static/bootstrap-dist/js/jquery-3.5.1.js"></script>
<script src="../static/layui/layui.js"></script>
<script type="text/html" id="titleTpl">
    <a href="javascript:void(0);" class="fName">{{d.feastName}}</a>
</script>

<script !src="">
    $(function (){
        layui.use(['table', 'layer', 'laydate', 'form'], function () {
            let table = layui.table;
            let layer = layui.layer;
            let laydate = layui.laydate;
            let form = layui.form;

            table.render({
                elem: '#giftData',
                height: 680,
                url: 'feast',
                method: 'post',
                toolbar: true,
                defaultToolbar: ['exports'],
                text: {
                    none: '你还没有举办过宴会哦'
                },
                where : {
                    opr : "giftList"
                },
                title: '礼金明细',
                parseData: function (res) {
                    return {
                        "code": 0,
                        "msg": "",
                        "count": res.length,
                        "data": res.totoInfo
                    }
                },
                done: function () {
                    $(".box").hide();
                    $(".main").show();
                },
                cols: [[
                    {type: 'numbers', title: '序号',fixed: 'left'},
                    {field: 'id', title: 'ID', sort: true, fixed: 'left'}
                    , {field:'feastName',event:'onfName',templet:'#titleTpl', title: '宴会名称'}
                    , {field: 'feastDate', title: '宴会创建日期'}
                    , {field: 'feastCost', style:'color: goldenrod;',sort: true, title: '预算'}
                    , {field: 'feastGet', title: '礼金'}
                ]]
            });

            let feast_id;
            table.on('tool(test)', function (obj) {
                let data = obj.data;
                let layEvent = obj.event;

                if (layEvent === 'onfName'){
                    feast_id = data.id;
                    calcGift(feast_id,layer);
                    table.render({
                        elem: '#attendInfoTab'
                        ,url: 'attendPeople'
                        ,where:{
                            opr : 'getAttendPeople',
                            feastId : data.id
                        }
                        ,even : true
                        ,method: 'post'
                        ,parseData: function (res) {
                            return {
                                "code": 0,
                                "msg": "",
                                "count": res.length,
                                "data": res
                            }
                        }
                        ,totalRow : true
                        ,text: {
                            none: '此宴会还没人参加'
                        }
                        ,done: function (res, curr, count) {
                            $("#attendInfo_top").show();
                            $("#attendInfo table").css("width", "100%");
                            $("#attendInfo .layui-table-box").css("border", "0.5px solid rgba(0,0,0,0.05)");
                        }
                        ,cols: [[
                            {field: 'attendPeople' ,style:'color: black;',title: '姓名',totalRowText : '合计：'}
                            , {field: 'attendDate',event:'attendDate', title: '参会日期'}
                            , {field: 'gift', style:'color: goldenrod;', title: '礼金',totalRow: true}
                            , {field: 'relationType',event:'relType',  title: '关系'}
                            , {field: 'note', title: '备注'}
                        ]]
                    });

                    $("#feastTitle").val(data.feastName);

                    layer.open({
                        title: ['宴会详情', 'color:#333;font-size:13px;'],
                        type: 1,
                        content: $('#feastInfo'),
                        area: ['1200px', '650px'],
                        skin: 'layui-layer-molv',
                        closeBtn: 1,
                        resize: false,
                        shadeClose: true,
                        maxmin: true,
                        end :function (){
                            $("#attendInfo_top").hide();
                        }
                    });
                }
            });

        });

        function calcGift(feast_id,layer){
            let index;
            $.ajax({
                url : "attendPeople",
                data : {
                    "opr" : "calcGift",
                    "feastId" : feast_id
                },
                beforeSend :function (){
                    index = layer.load(2); //换了种风格
                },
                complete: function () {
                    layer.close(index);
                },
                success : function (data){
                    $("#sumGift").val(data);
                }
            })
        }
    });

    document.getElementsByTagName('img')[0].onmousedown = function(e){
        e.preventDefault()
    };
</script>
</body>
</html>
